<table id="sn" class="easyui-datagrid" title="Generate SN" style="height:500px"
                data-options="
                        url: '<?php echo $this->baseUrl() ?>/jsondata/gensn',
                        fitColumns: true,
                        singleSelect: true,
                        rownumbers: true,
                        showFooter: true,
                        autoRowWidth:true,
                        toolbar:'#tb'
                ">
        <thead>
                <tr>
                        <th data-options="field:'SN',width:80">SN</th>
                        <th data-options="field:'PIN',width:120">PIN</th>
                </tr>
        </thead>
    </table>

    <div id="tb" style="padding:5px;height:auto">
        <div class="content-inner">
        <form name="frm" id="frm" method="post">
        <table>
               
                <tr>
                    <td>Jumlah SN</td>
                    <td>:
                    <input class="easyui-validatebox" type="text" name="num" id="num" onkeypress='return validateNumber(event)'></input>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="generateSN()">Generate</a>

                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>&nbsp;&nbsp;Cth: 1500 (Tanpa titik/koma)</td>
                </tr>

        </table>
    </form>
            </div>
</div>

<script>
    $(function(){
            var pager = $('#sn').datagrid('getPager');	// get the pager of datagrid
            pager.pagination({
                    buttons:[{
                            iconCls:'icon-excel',
                            handler:function(){
                                    downloadExcel();
                            }
                    }]
            });
    })

    function validateNumber(evt) {

        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
      }
      
    function downloadExcel(){

       var num = $('#num').val();
       
       $("#sn").datagrid("loading");

        $.ajax({
        type: 'GET',
        dataType: 'text',
        url: '<?php echo $this->baseUrl() ?>/excel/gensn',
        data: {jenis: jenis, date1: date1, date2: date2},
        success: function(result){
                    $("#sn").datagrid ("loaded");

                    if (result == "TIMEOUT"){
                        location.href = "<?php echo $this->baseUrl() ?>/admin";
                    }else{
                        location.href = "<?php echo $this->baseUrl() ?>/excel/"+result;
                    }
             }
        });

    }

    function cek(){
        var msg = [];

        if ($('#num').val() == "") msg.push('<span>* Jumlah SN harus diisi</span>');
        if (msg.length == 0) return true;
        else{
            //alert("Data tidak lengkap:\n\n" + msg);
            //$.messager.alert("Data tidak lengkap:\n\n" + msg);
            $.messager.alert('Info', msg.join('<br/>'));
            return false;
        }
    }

    function generateSN(){

            if(cek()){

            var num = $('#num').val();


            $('#sn').datagrid({
                queryParams: {
                page: 1,
                rows: 10,
                num: num
                }
                });


         var pager = $('#sn').datagrid('getPager');	// get the pager of datagrid
            pager.pagination({
                    buttons:[{
                            iconCls:'icon-excel',
                            handler:function(){
                                    downloadExcel();
                            }
                    }]
            });

        }
            
    }

   
</script>




